<template>
	<view>
		<uni-list>
			<uni-list-item title="头像" @click="changeAvatar()">
				<template v-slot:right="">
					<image style="width: 120rpx;height: 120rpx;border-radius: 50%;" :src="userInfo.avatar" mode="widthFix"></image>
				</template>
			</uni-list-item>
			<uni-list-item title="昵称" :rightText="userInfo.nick_name" @click="openPop(1)" />
			<uni-list-item title="简介" :rightText="brief" @click="openPop(2)" />
		</uni-list>
		<uni-popup type="center" ref="usePopup">
			<view class="usePopup bgfff">
				<view class="usePopup-title">
					<text v-if="popType == 1">修改昵称</text>
					<text v-if="popType == 2">修改简介</text>
				</view>
				<view class="uni-common-mt" v-if="popType == 1">
					<view class="uni-form-item uni-column">
						<view class="uni-input-wrapper pt-20 pb-20">
							<input class="uni-input" :value="popText" @input="changePopText" :maxlength='10' placeholder="请输入昵称" />
						</view>
					</view>
				</view>
				<view class=" pt-20 pb-20" v-if="popType == 2">
					<textarea @input="changePopText" :value="popText" :maxlength='200' placeholder="请输入个人简介" />
					</view>
				<view class="usePopup-button flex center justify-between flex1">
					<view class="w50 flex justify-center center f32" style="border-right:1px solid #F5F5F5;height: 88rpx;" @click="$refs.usePopup.close()">
						取消
					</view>
					<view class="w50 flex justify-center center f32" style="height: 88rpx;" @click="confirm()">
						确定
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	
	export default {
		onShow() {
			this.info();
		},
		components: {
			
		},
		data() {
			return {
				userInfo: {},
				brief:'',	//简介显示字段
				popType:1,
				popText:'',	//弹窗中的输入
			}
		},
		onLoad() {
			
		},
		methods: {
			//获取用户详情
			info() {
				this.$http.post(this.$api.user.info, {}).then(res => {
					console.log(res.data);
					if (res.code == 200) {
						this.userInfo = res.data;
						if(this.userInfo.brief && this.userInfo.brief.length > 15){
							this.brief = this.formatStr(this.userInfo.brief, 0, 15)+'...';
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000,
						});
					}
				}).catch(err => {
					uni.showToast({
						title: err,
						icon: 'none',
						duration: 2000,
					});
				})
			},
			//打开弹窗
			openPop(type){
				this.popType = type;
				if(this.popType == 1){
					this.popText = this.userInfo.nick_name;
				}else if(this.popType == 2){
					this.popText = this.userInfo.brief;
				}
				this.$refs.usePopup.open();
			},
			//修改输入
			changePopText(event){
				this.popText = event.detail.value;
			},
			//确认修改
			confirm(){
				let params = {};
				if(!this.popText){
					uni.showToast({
						title: '输入不能为空',
						icon: 'none',
						duration: 2000,
					});
					return;
				}
				if(this.popType == 1){
					params.nick_name = this.popText;
				}else if(this.popType == 2){
					params.brief = this.popText;
				}
				//保存昵称修改
				this.$http.post(this.$api.user.update, params).then(res => {
					console.log(res.data);
					if (res.code == 200) {
						uni.showToast({
							title: '修改成功',
							icon: 'none',
							duration: 2000,
						});
						//将修改的数据同步至页面
						if(this.popType == 1){
							this.userInfo.nick_name = this.popText;
						}else if(this.popType == 2){
							this.userInfo.brief = this.popText;
							this.brief = this.popText;
							if(this.popText.length > 15){
								this.brief = this.formatStr(this.userInfo.brief, 0, 15)+'...';
							}
						}
						// 重置输入框
						this.$refs.usePopup.close();
						this.popText = '';
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000,
						});
					}
				
					
				})
			},
			//修改头像
			changeAvatar(){
				//写一个功能，暂时不提供实现
				let _this = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed '],
					sourceType: [],
					success: (res) => {
						console.log(res)
						var imageSrc = res.tempFiles[0];
						
						//没办法直接上传，所以转成Base64.给用户看一下
						var reader = new FileReader();
						reader.readAsDataURL(imageSrc);
						reader.onload = function(){
						    // console.log(reader.result); //获取到base64格式图片
							_this.userInfo.avatar = reader.result;
						};
						
						
						//上传功能暂时做不了。没有买储存服务器
						// for(let i=0;i<imageSrc.length;i++){
						// 	uni.uploadFile({
						// 		url: _this.$api.sellSetBt.goodsUploadImg,
						// 		filePath: imageSrc[i],
						// 		fileType: 'image',
						// 		formData: {
						// 		   "key":uni.getStorageSync('storage_key'),
						// 		},
						// 		name: 'file',
						// 		success: (res) => {
						// 			console.log('uploadImage success, res is:', res)
						// 			res = JSON.parse(res.data);
						// 			if(res.code == 200){
						// 				uni.showToast({
						// 					title: '上传成功',
						// 					icon: 'success',
						// 					duration: 1000
						// 				})
						// 				this.$emit('uploadSuccess',res.datas);
						// 			}else{
						// 				uni.showModal({
						// 					content: res.datas.error,
						// 					showCancel: false
						// 				});
						// 			}
									
						// 		},
						// 		fail: (err) => {
						// 			console.log('uploadImage fail', err);
						// 			uni.showModal({
						// 				content: err.errMsg,
						// 				showCancel: false
						// 			});
						// 		}
						// 	});
						// }
					},
					fail: (err) => {
						console.log('chooseImage fail', err)
					}
				})
				
			}
		}
	}
</script>

<style lang="scss">
	.usePopup{
		border-radius: 20rpx;
		padding: 16rpx;
		padding-bottom: 0;
		width: 600rpx;
		.usePopup-title{
			text-align: center;
			width: 100%;
		}
		.usePopup-button{
			border-top: 1px solid #f5f5f5;
		}
	}
</style>
